<script setup>
import { ref, onMounted, reactive, toRefs } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import { getBookInformation } from '@/apis/bookInformation';
import { getWriteInfo } from '@/apis/getWrite';
import { guan, dis_guan } from "@/apis/guan"
import { useRoute } from 'vue-router'
import { getCurrentInstance } from 'vue';
// 状态变量，表示用户是否已关注作者，默认为 false，表示未关注
const isFollowing = ref(false);
const authorInfo = ref()
const bookInfo = ref()
const route = useRoute()
const { proxy } = getCurrentInstance();
const toggleFollow = async() => {
  console.log(isFollowing.value)
  // 如果用户已关注，则取消关注，并通过 ElMessage 提示用户
  if (isFollowing.value) {
    ElMessage.success('取消关注成功');
    await dis_guan(bookInfo.value.author.author_id,proxy)
  } else {
    // 如果用户未关注，则关注，并通过 ElMessage 再次询问用户
    ElMessage.success('关注成功');
    await guan(bookInfo.value.author.author_id, proxy)
  }
  // 切换关注状态
  isFollowing.value = !isFollowing.value;
}

const getBookInfo = async (id) => {
  const res = await getBookInformation(id,proxy);
  console.log(res)
  bookInfo.value = res;
  console.log(res.author.author_id)

  const user_name = res.author.author_id
  console.log(user_name)
  const res1 = await getWriteInfo(user_name,proxy);
  console.log(res1)
  authorInfo.value = res1;
  console.log(authorInfo.value)
  isFollowing.value = authorInfo.value.guan
}
onMounted( async () => {
  await getBookInfo(route.params.id)
})
</script>

<template>
  <div class="author-card" v-if="authorInfo">
    <div class="avatar">
      <el-avatar size='large' :icon="UserFilled" :src="`${authorInfo.user_head}`" />
    </div>
    <div class="writeName">
      <p>{{ authorInfo.user_nick }}</p>
    </div>
    <div class="upLayer">
      <p class="content">{{ authorInfo.book_num }}</p>
      <p class="word">本</p>
      <p class="content" style="margin-left: 45px">{{ authorInfo.point }}</p>
      <p class="word" style="margin-right: 45px">分</p>
    </div>
    <div class="downLayer">
      <p style="margin: 10px">作品数量</p>
      <p style="margin: 10px">作家评分</p>
    </div>
    <div class="img">
      <img src="../../../assets/BookInformation/作者大大正在码字.png" alt="">
    </div>
    <div class="button">
      <el-button type="danger" round @click="toggleFollow">{{ isFollowing ? '取消关注' : '关注' }}</el-button>
    </div>
  </div>
</template>
<style scoped>
.author-card {
  overflow: hidden;
  width: 275px;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 300px;
  background: linear-gradient(rgba(255, 192, 203, 0.3), rgba(255, 192, 203, 0.3));
}

.writeName {
  margin: 10px;
  font-size: 25px;
  font-weight: bold;
}

.upLayer {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  /* 将子元素的底部与容器的底部对齐 */
}

.upLayer p {
  margin: 0;
  /* 去除段落标签的默认边距 */
}

.content {
  font-size: 25px;
}

.word {
  font-size: 10px;
}

.downLayer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px;
  font-size: 15px;
  opacity: 0.5;
}

.button {
  margin: 20px;
}
</style>